<template>
  <div class="star">
    <span v-for="itemClass in itemClasses" :class="itemClass" class="star-item"></span>
  </div>
</template >
<script>
    export default {
    data() {
      return {

      }
    },
    props: {
      score: {
        type: Number,
        default () {
          return 3.8
        }
      }
    },
    computed: {
      itemClasses() {
   const len = 5 ;
   const ON ='on';
   const OFF ='off';
   const HALF = 'half';
   let result=[];
   let score =math.floor(this.score )  ;
   let hasHalf = this.score % 1  !== 0  ;
   for(let i = 0 ;i<score ; i++){
     result.push(ON)
   }
   if(hasHalf){
     result.push(HALF)
   }
   while(result.length !===len){
     result.push(OFF)
   }
    }
    return  result
  }

</script>
<style scoped>
    .star {
        height: 20px;
    }
  .star span {
      display: inline-block;
      width: 20px;
      height: 20px;
  }
  .on {
    background-image: url(~assets/img/range/all.png);
    background-size:contain;
  }

  .half {
    background-image: url(~assets/img/range/half.png);
    background-size:contain;
  }

  .off {
    background-image: url(~assets/img/range/gray.png);
    background-size:contain;
  }

</style>
